<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>题目管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加题目</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <!-- 添加题目表单 -->
      <el-form
        :model="addForm"
        :rules="addRules"
        ref="addFormRef"
        label-width="100px"
        label-position="top"
      >
        <el-form-item label="题目名称" prop="title">
          <el-input v-model="addForm.title"></el-input>
        </el-form-item>
        <el-form-item label="题目添加人" prop="author">
          <el-input v-model="addForm.author" :disabled="isdisabled"></el-input>
        </el-form-item>
        <el-form-item label="指导老师" prop="Tauthor">
          <!-- 选择器 -->
          <el-select
            v-model="addForm.Tauthor"
            placeholder="请选择"
            :disabled="isdisabled"
          >
            <el-option
              v-for="(item, index) in teachers"
              :key="index"
              :label="item.username"
              :value="item._id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目内容" prop="content">
          <el-input
            type="textarea"
            :rows="15"
            placeholder="请输入内容"
            v-model="addForm.content"
          ></el-input>
        </el-form-item>
      </el-form>

      <!-- 提交按钮 -->
      <el-row>
        <el-col :span="2">
          <el-button type="primary" @click="addArticle">提交</el-button>
        </el-col>
        <el-col :span="1">
          <el-button type="warning" @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 老师数据数组
      teachers: [],
      // 指导老师选择器是否只读
      isdisabled: false,
      // 添加题目表单对象
      addForm: {
        title: '',
        // 题目添加人
        author: '',
        // 指导老师
        Tauthor: '',
        content: '',
        // 管理员添加,默认通过审核
        checked: true
      },
      // 添加题目表单规则对象
      addRules: {
        title: [
          { required: true, message: '请输入题目名称', trigger: 'blur' },
          { min: 5, message: '题目长度不能小于5个字符', trigger: 'blur' }
        ],
        author: [
          { required: true, message: '请输入题目添加人', trigger: 'blur' }
        ],
        Tauthor: [
          { required: true, message: '请输入题目添指导老师', trigger: 'blur' }
        ]
      }
    }
  },
  // 生命周期函数
  async created() {
    // 获取老师列表
    this.getUserList()
    // 获取当前登陆用户名
    await this.$store.dispatch('getUserInfo', window.localStorage.getItem('uid'))
    this.addForm.author = this.$store.state.username
    // 如果登陆用户为老师，给指导老师默认赋值为当前登陆用户
    if (this.$store.state.role === 'teacher') {
      this.addForm.Tauthor = this.$store.state.uid
      // 指导老师选择器只读
      this.isdisabled = true
      // addForm中重新赋值未false，未审核状态提交
      this.addForm.checked = false
    }
  },
  methods: {
    // 获取用户列表,然后过滤出老师数组
    async getUserList() {
      const { data: res } = await this.$http.get('users')
      console.log(res)
      // 过滤出老师数组,并给组件私有数据赋值
      this.teachers = res.records.filter(item => {
        return item.role === 'teacher'
      })
      console.log(this.teachers)
    },
    // 确认提交
    addArticle() {
      // 表单预验证
      this.$refs.addFormRef.validate(async valid => {
        // 验证不通过
        if (!valid) {
          return this.$message.error('验证不通过,请检查')
        }
        // 验证通过 发送请求
        const { data: res } = await this.$http.post(
          'articles/add',
          this.addForm
        )
        // 判断请求结果
        if (res.meta.status !== 201) {
          return this.$message.error('添加失败')
        }
        // 请求成功
        // 给出提示,并清空表单
        this.$message.success('添加成功')
        this.$refs.addFormRef.resetFields()
      })
    },
    // 重置表单
    reset() {
      this.$refs.addFormRef.resetFields()
    }
  }
}
</script>
